<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <title>农业视频详情</title>


    <!-- Expand styles -->
    <link href="../css/app/app.css" rel="stylesheet">
    <link href="../css/app/default.css" rel="stylesheet">
    <link href="../css/mui/mui.css" rel="stylesheet">

</head>

<body>

    <!-- header -->
    <div class="mui-content">
        <div class="widget-default trade-list">

            <div class='height224 width-100' id="videoDiv">
                <video id="myVideo" width="100%" height="224" controls preload="auto" controlslist="nodownload">
                    <source type="video/mp4" id="myVideoSoure"/>
                您的浏览器不支持Video标签。
                </video>
            </div>
            <div  id="playButton">
                <div class="video-shade">
                    <div class="position-open" onclick="playVideo()">
                        <!-- <img class="open-img" src="../img/open.png" alt=""> -->
                        <div class="white font-15 padding-t-10" id="canSeeTimeTip">
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <div class="widget-body widget-default margin-b-5">
            <div class="display-flex padding-b-10">
                <img class="farm-head" src="../img/headimg.png" alt="" id="headPortrait" onclick="toPersonHomePage()">
                <div class="display-flex flex-column justify-content-between margin-l-10 width-100">
                    <div class="display-flex align-items-center justify-content-between">
                        <span class="elli1 font-weight black font-16 font-weight no-margin" id="userName"></span>
                        <div class="farm-label text-center margin-t-5">
                            <a class="white font-12 bc-head" id="concernOper">关注</a>
                        </div>
                    </div>
                    <span class="gray font-12"><yang id="fansNum">0</yang>粉丝</span>
                </div>
            </div>
            <p class="font-17 black font-weight no-margin elli2" id="title"></p>
            <p class="gray font-12 padding-t-5 no-margin margin-b-5"><yang id="pageViewNum">0</yang>次 播放</p>
            <p class="font-15 gray3 font-weight no-margin elli3" id="introduction">
                
            </p>
        </div>

    </div>


    <div class="hobby-footer1 display-flex widget-default">
        <div class="farming2-tab text-center bc-head white width80 font-17 lineheight60" onclick="goEvalOper()">
            评论
        </div>
        <div class="display-flex align-items-center justify-content-center flex-column width20" id="praiseDiv">
            <img class="farm-icon1 praiseOper praiseImg" src="../img/zai.png" alt="">
            <span class="font-15 gray praiseOper" id="praiseNum">0</span>
        </div>
    </div>

    <script src="../js/dsbridge.js"></script>
    <script src="../js/jquery.js"></script>
    <script src="../js/mui/mui.js"></script>
    <script src="../js/mui/mui.picker.min.js"></script>
    <script src="../js/layer.js"></script>
    <script src="../js/app/app-base.js"></script>
    <script src="../js/app/app-url.js"></script>
    <script src="../js/app/app-ajax.js"></script>
    <script>
        //视频id
        var id = localStorage.getItem("video-detail-id");
        //视频详情
        var detail;
        //video对象
        var myVideo = document.getElementById("myVideo");
        //视频总时长(秒)
        var totalTime ;
        //当前播放进度(秒)
        var timeDisplay;
        //可免费播放时长(秒)
        var canSeeTime = 0;
        //可免费播放提示
        var canSeeTimeShow = '';
        //视频费用
        var costAmount = 0;
        //播放标记 0-可全部播放 1-试看
        var palyFlag;
        //视频播放地址
        var playUrl;
        //收费提示
        var costTipH5 = '';
        //视频发布人
        var publishUserAccId = '';
        $(document).ready(function(){

            dsBridge.register('store', function () {
                store();
            })

            dsBridge.register('share', function () {
                share();
            })

            //保存浏览记录
            savePageViewOper();
            var data = {
                id:id,
                userAccId: getUserId()
            }
            getServerData(url_agrivideoInfo_queryDetail, data);
        })

        //保存浏览记录
        function savePageViewOper(){
            var data = {
                userId:getUserId(),
                itemType:19,
                itemId:id,
                actionType:1,
                channel:2
            }
            getServerData(url_commonoper_operAction, data);
        }

        //设置video
        function setVideoDiv(){
            var h5 = '<video id="myVideo" width="100%" height="224" controls preload="auto" controlslist="nodownload">'
                    +'<source type="video/mp4" id="myVideoSoure"/>'
                    +'您的浏览器不支持Video标签。'
                    +'</video>';
            $("#videoDiv").html(h5);
            myVideo = document.getElementById("myVideo");
            $("#myVideo").attr("poster",showBigImg(detail.coverImg));
            myVideo.src = playUrl;
            myVideo.load();
            //监听播放开始
            myVideo.addEventListener('play', function () {
                playVideo();
            });
            //当目前的播放位置已更改时触发
            myVideo.addEventListener("timeupdate", function () {
                //用秒数来显示当前播放进度
                timeDisplay = Math.floor(myVideo.currentTime);

                if (timeDisplay >= canSeeTime && totalTime > 0) {
                    playPause();
                }
            }, false);

            //当用户已移动/跳跃到音频/视频中的新位置时触发。
            myVideo.addEventListener("seeked", function () {
                if (timeDisplay >= canSeeTime) {
                    playPause();
                }
            });

            //当用户开始移动/跳跃到音频/视频中的新位置时触发。
            myVideo.addEventListener("seeking", function () {
                if (timeDisplay >= canSeeTime) {
                    playPause();
                }
            });

            //当音频/视频的时长已更改时触发。
            myVideo.addEventListener("durationchange", function () {
                totalTime = myVideo.duration;
                if (palyFlag == 1) {
                    //收费
                    canSeeTime = Math.round(totalTime * 0.2);
                    //收费免费时长不能超过5分钟
                    if(canSeeTime > 300){
                        canSeeTime = 300;
                    }
                    canSeeTimeShow = "可试看" + getDuration(canSeeTime);
                    costTipH5 += '<div class="video-shado1">'
                                    +'<div class="blue1 font-15 padding-t-60 text-center">'+costAmount+'元购买此视频观看完整版</div>'
                                    +'<div class="see-box font-16 black text-center font-weight" onclick="buyVideo()">立即购买</div>'
                                    +'<div class="display-flex align-items-center justify-content-center padding-t-50">'
                                        +'<span class="white font-15" onclick="rePlayVideo()">重新试看</span>'
                                        +'<img class="goright-img padding-l-5" src="../img/new-expert/go-right.png" alt="" onclick="rePlayVideo()">'
                                    +'</div>'
                                +'</div>';
                }else{
                    canSeeTime = totalTime;
                    canSeeTimeShow = "";
                }
                $("#canSeeTimeTip").text(canSeeTimeShow);
            });
        }

        function getServerDataSuccess(url, data) {
            switch (url) {
                case url_agrivideoInfo_queryDetail:
                    detail = data.data;
                    publishUserAccId = detail.userAccId;
                    playUrl = detail.playUrl;
                    costAmount = detail.costAmount;
                    palyFlag = detail.palyFlag;
                    setVideoDiv();
                    var person = detail.person;
                    if(person != null){
                        var headPortrait = person.headPortrait;
                        if(isEmpty(headPortrait)){
                            $("#headPortrait").attr("src","../img/headimg.png");
                        }else{
                            $("#headPortrait").attr("src",showSmallImg(headPortrait));
                        }
                        $("#userName").text(person.userName);
                        if(person.isFollow == 0){
                            //未关注
                            $("#concernOper").text("关注").attr("class","white font-12 bc-head");
                        }else{
                            $("#concernOper").text("已关注").attr("class","gray font-12 farm-label-bg");
                        }
                        $("#fansNum").text(person.fansNum); 
                    }
                    $("#title").text(detail.title);
                    $("#pageViewNum").text(detail.pageViewNum);
                    $("#introduction").text(detail.introduction);
                    $("#praiseNum").text(detail.praiseNum);
                    if(detail.isPraise == 0){
                        //未点赞
                        $("img.praiseOper").attr("src","../img/zai.png");
                    }else{
                        //已点赞
                        $("img.praiseOper").attr("src","../img/applaud.png");
                    }
                    break;
                case url_commonoper_operAction + '?type=concern':
                    //关注
                    $("#concernOper").text("已关注").attr("class",
                        "gray font-12 farm-label-bg");
                    $("#fansNum").text(Number($("#fansNum").text())+1);
                    break;
                case url_oper_action_cancel + '?type=concern':
                    //取消关注
                    $("#concernOper").text("关注").attr("class",
                        "white font-12 bc-head");
                    $("#fansNum").text(Number($("#fansNum").text())-1);
                    break;
                case url_commonoper_operAction + '?type=praise':
                    //点赞
                    $(".praiseImg").attr("src", "../img/applaud.png");
                    var $praiseNum = $("#praiseNum");
                    var praiseNum = Number($praiseNum.text()) + 1;
                    $praiseNum.text(praiseNum);
                    break;
                case url_oper_action_cancel + '?type=praise':
                    //取消点赞
                    $(".praiseImg").attr("src", "../img/zai.png");
                    var $praiseNum = $("#praiseNum");
                    var praiseNum = Number($praiseNum.text()) - 1;
                    if (praiseNum < 0) {
                        praiseNum = 0;
                    }
                    $praiseNum.text(praiseNum);
                    break;
                case url_storemng_store:
                    showToast("收藏成功");
                    break;
                case url_video_generatedOrder:
                    dsBridge.call("buy",data.data.orderNo+"&"+costAmount);
                    break;
                }
        }

        function goEvalOper() {
            localStorage.setItem("comment-object-id", id);
             dsBridge.call("goEvalOper", id);
        }

        //播放视频
        function playVideo() {
            if (timeDisplay >= canSeeTime) {
                playPause();
            } else {
                $("#playButton").hide();
                myVideo.play();
            }
        }

        //播放暂停
        function playPause() {
            myVideo.remove();
            if($("#playButton").html() != costTipH5){
                $("#playButton").html(costTipH5);
            }
            $("#playButton").show();
        }

        
        //立即购买
        function buyVideo(){
            // loading();
            //获取订单号
            var data = {
                userAccId:getUserId(),
                amount:costAmount,
                agriVideoInfoId:id
            }
            getServerData(url_video_generatedOrder, data);
        }

        //重新试看
        function rePlayVideo(){
            timeDisplay = 0;
            setVideoDiv();
            myVideo.currentTime = 0;
            playVideo();
        }

        //秒数转化为分秒
        function getDuration(my_time) {
            var minutes = my_time / 60;
            var minutesRound = Math.floor(minutes);
            var seconds = my_time - (60 * minutesRound);
            var time = '';
            if (minutesRound > 0) {
                time = minutesRound + '分' + seconds + '秒';
            } else {
                time = seconds + '秒';
            }
            return time;
        }

        //去个人主页
        function toPersonHomePage(){
            dsBridge.call("toPersonHomePage",publishUserAccId);
        }

        //关注/取消关注
        mui(".mui-content").on('tap', '#concernOper', function () {
            if($(this).hasClass("bc-head")){
                //关注
                var data = {
                    userId: getUserId(),
                    itemType: 20,
                    itemId: publishUserAccId,
                    actionType: 5,
                    channel: 2
                }
                getServerData(url_commonoper_operAction + '?type=concern', data);
            }else{
                //取消关注
                var data = {
                    userId:getUserId(),
                    itemId:publishUserAccId,
                    actionType:5
                }
                getServerData(url_oper_action_cancel + '?type=concern', data);
            }
        });

        //点赞/取消点赞
        mui("#praiseDiv").on('tap', '.praiseOper', function () {
            if ($("img.praiseImg").attr("src") == '../img/zai.png') {
                //点赞
                var data = {
                    userId: getUserId(),
                    itemType: 19,
                    itemId: id,
                    actionType: 2,
                    channel: 2
                }
                getServerData(url_commonoper_operAction + '?type=praise', data);
            } else {
                //取消点赞
                var data = {
                    userId: getUserId(),
                    itemId: id,
                    actionType: 2
                }
                getServerData(url_oper_action_cancel + '?type=praise', data);
            }

        });

        //收藏
        function store(){
            var contentCtg;
            if(detail.labelType != null){
                contentCtg = detail.labelType.code;
            }
            var data = {
                title: detail.title,
                picture: detail.coverImg,
                contentCtg: contentCtg,
                type: 19,
                contentId: id,
                price:detail.costAmount,
                intro:detail.introduction,
                user:getUserId()
            }
            getServerData(url_storemng_store, data);
        }

        //分享
        function share(){
            dsBridge.call("share",detail);
        }
    </script>

</body>

</html>